<template>
	<div class="waitForMeal" v-show="isShow">
		<div class="header">
			<img :src="storeImg" alt="">
			<span v-html="storeName"></span>	
			<button @click.stop="refresh">刷新</button>
		</div>	
		<scroller lock-x ref="scroller" scrollbar-y>
			<div class="wrapper">
				<div class="container">
					<div class="order-wrap">
						<div class="icon-box">
							<img src="../assets/img/icon_qucanma.png" alt="">					
						</div>
						<p class="order-code">
							取餐码：<span class="tc-text-red" v-html="takeFoodCode"></span>
						</p>
						<p class="order-tips"><span class="tc-text-red">正在准备您的订单</span>，请留意门店屏幕上的取餐号码及微信公众号的消息提醒</p>
						<div class="order-code-img">
							<div class="code-img">
								<img :src="qrcode" alt="">
							</div>	
							<p style="font-size:.5rem;line-height:1.5;text-align:center;">{{orderNo}}</p>
						</div>
					</div>
					<div class="order-list-wrap">
						<h5 class="title">订单情况</h5>
						<ul class="order-list">
							<li v-for="(item,index) in orderDetail">
								<div class="order-box">
									<img :src="item.packageImg" alt="">
									<div class="order-status">
										<h5 class="name">{{item.cdDishesName}}</h5>
										<p v-if="item.progress == '配餐中' || item.progress == '待取餐' || item.progress == '已完成' || item.progress == '取消' || item.progress== '待出炉'">
											<strong class="tc-text-grey">{{item.progress}}</strong>
										</p>
										<p v-else-if="item.progress == '烹饪中'">
											<strong class="tc-text-red">{{item.progress}}</strong>
											<small v-if="item.duration > 0">剩余<span>{{item.duration | countDown}}</span></small>
										</p>
									</div>									
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</scroller>	
	</div>
</template>

<script>
	import Vue from 'vue'
	import { Scroller } from 'vux'
	import { getTakeFoodCode } from '../services'
	import { isEmptyObject } from '../assets/js/common'

	import  { LoadingPlugin } from 'vux'
	Vue.use(LoadingPlugin)

	var timers = {};
	var updateTimer;
	export default {
		components : {
			Scroller
		},
		data(){
			return {
				containerH : '',
				isShow : false,
				orderNo : '',  //订单ID
				storeImg : '',  //门店logo
				storeName : '', //门店名
				takeFoodCode : '', //取餐码
				qrcode : '',  //条形码
		        orderDetail : ''  //订单情况
			}
		},
		computed : {
			allOrder (){
				let that = this;
				let orderDetail = that.orderDetail;
				if(!orderDetail){return};  //初始化的时候值为''

				let arr = [];
				orderDetail.forEach(function(item,index){
					if(item["packageList"] && item["packageList"] != null){
						item["packageList"].forEach(function(x,y){
							arr.push(x);
						})
					}else{
						arr.push(item);
					}
				})
				return arr
			}
		},
		watch : {
			allOrder : {
				handler(newVal,oldVal){
					newVal.forEach(function(item,index){
						if(item.progress == "烹饪中" && item.duration > 0){

							const packageId = item.packageId;
							if(timers[packageId]) return;  //如果定时器已经存在则退出
							
							(function(i){
								let duration = parseInt(i.duration);
								timers[packageId] = setInterval(function(){
									if(duration <= 1000){

										i.progress = "已完成";

										clearInterval(timers[packageId]);
										delete timers[packageId];							
									}
									item.duration = (duration -= 1000);
								},1000);
							})(item);								
						}
					})
				},
				deep : true
			}
		},
		created(){		
			this._common();
		},
		activated(){
			this._common();		
		},
		mounted(){
			var wrap = document.querySelector(".wrapper");
			this.containerH = wrap.offsetHeight;
			this._updateOrder();
		},
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
            })         
        },
        request : null,
        methods : {
        	_common(){
        		this._clearTimer();
        		this.isShow = false;
				this.orderId = this.$route.query.orderId;   //获取跳转订单id
				this._getTakeFoodCode(this._callback);	        		
        	},
        	_clearTimer(){
        		const _this = this;
        		//关闭当前页面所有定时器
        		window.addEventListener("popstate",function(){
					clearInterval(_this.request);
        		})
        	},
        	_getTakeFoodCode(_callback){
				// 显示
				this.$vux.loading.show({
					text: '加载中...'
				})	        		
        		const that = this;
        		let orderId = that.orderId;
        		getTakeFoodCode().save({"orderId" : orderId})
        			.then((res)=>{

        				const request  = res.body;
        				if(request.msg == "ok" && request.code == "200"){
        					
        					_callback(that,request);

        					that.$vux.loading.hide()
        				}else if(request.code == "400"){
        					alert(request.msg);
        				}
        			})
        	},
        	_callback(that,request){
				that.storeImg = request.data.storeImg;
				that.storeName = request.data.storeName;
				that.orderNo = request.data.orderNo;
				that.qrcode = 'http://iot2.midea.com.cn' + request.data.qrcode; 
				that.isShow = true;    		

				//初始化取餐码和订单
				that._refreshMenus(that,request);
        	},
        	_refreshMenus(that,request){
        		that.takeFoodCode = request.data.takeFoodCode;
        		that.orderDetail = request.data.orderDetail;
        	},
        	_updateOrder(){
        		const that = this;
        		clearInterval(this.request);
        		this.request = setInterval(function(){
        			that._getTakeFoodCode(that._refreshMenus);
        		},15000);
        	},
        	refresh (){
				const that = this;

				//删除定时器
				if(!isEmptyObject(timers)){
					for(var i in timers){
						clearInterval(timers[i]);
						delete timers[i];
					}
				}
				that._getTakeFoodCode(that._refreshMenus);
        	}

        },
        filters : {
        	countDown :(value) =>{
        		let val = Number(value);
        		let hour = parseInt(val / 1000 / 60 /60 %24);
        		let minute = parseInt(val/1000/60%60);;
        		let second = parseInt(val/1000%60);

        		hour = hour > 0 ? hour + "小时" : "";
        		minute = minute > 0 ? minute + "分钟" : "";
        		second = second > 0 ? second + "秒" : "";

    			return hour + minute + second
        	}
        }		
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
	.tc-text-grey {
		color:#999;
	}
	.tc-text-red {
		color :#fa5a4c;
	}
	.header {
		z-index: 10;
		position: fixed;
		width:100%;
		font-size: 0.6rem;
		background-color: #fff;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        padding: 0.5rem 1rem;	
        box-shadow: 0 0 5px rgba(0,0,0,.15);	
        
        img {
        	width: 1rem;
        	height: 1rem;
        	border:0;
        }		

        span {
        	margin-left: .25rem;
        }	            			

		button {
			line-height: 1;
			color:#fff;
			position : absolute;
			right: 1rem;
			border:0;
			background-color: #fa5a4c;
			top:50%;
			margin-top: -.75rem;
		}				
	}	
	.wrapper {
		-webkit-overflow-scrolling : touch;  
		position: relative;
		font-family: "Microsoft Yahei";
		overflow: hidden;
		.container{
			-webkit-overflow-scrolling : touch; 
			padding-top: 2rem;
			padding-bottom: 2rem;
			background-color: #f6f6f6;
			.order-wrap {
				position: relative;
				.icon-box {
					padding-top: .75rem;
					padding-bottom : 1.2rem;
					img {
						width: 30%;
						margin:0 auto;
						display: block;
					}
				}
				.order-code {
					text-align: center;
					font-size: 1rem;
				}
				.order-code-img {
					background-color:#fff;
					padding:.8rem;
					margin:0 1.5rem;
				}
				.order-tips {
					font-size: .8rem;
					line-height: 1.2rem;
					padding: 1rem 1.875rem .5rem; 
					text-align:justify; 
				}
				.code-img {
					img {
						display: block;
						margin:0 auto;
						width: 100%;
					}
				}
			}
			.order-list-wrap {
				padding:1rem;
				.title {
					position: relative;
					font-weight: normal;
					color:#333;
					text-align: center;
				}
				.title:after,.title:before{
					content:'';
					position: absolute;
					width: 6rem;
					background-color: #e6e6e6;
					height: 1px;
					tarnsform:scale(.5);
					top : 50%;
				}
				.title:after {
					right: 0;
				}
				.title:before {
					left: 0;
				}
				.order-list {
					list-style: none;
					font-size: .6rem;
					padding-top : .5rem;
					li {
						position: relative;
						background-color: #fff;
						padding : .6rem;
						margin-bottom: .6rem;
						border-radius: 5px;
						box-shadow: 0 0 3px rgba(0,0,0,.05);
					}
					strong {
						font-weight: normal;
					}
					.order-title {
						background-color: #fa5a4c;
						font-size: .8rem;
						display: inline-block;
						color:#fff;
						padding: .2rem .5rem;
						margin-bottom: .8rem;
					}
					.order-box:not(:last-child){
						margin-bottom:.6rem;
					}
					.order-box {
						display: flex;
						align-items: center;
						justify-content : flex-start;
						

						.order-status {
							padding-left: .5rem;
							p {
								padding-top: .2rem;
							}
						}

						.name {
							line-height: 1;
							flex : 1;
							font-size:.8rem;
							font-weight: normal;
						}
						
						strong {
							flex:.8;
							text-align: center;
						}

						small {
							flex : 1;
							text-align: right;
							color:#999;
							margin-left: 1rem;
						}
						img {
							width: 2rem;
							height: 2rem;
						}						
					}

				}
			}
		}
	}
</style>